import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:provider/provider.dart';
import 'package:sanzijing/global.dart';
import 'package:sanzijing/http/api.dart';
import 'package:flutter/material.dart';
import 'package:sanzijing/main_manager.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id}) : super(key: key);
  final String id;
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var _data;
  var _id;
  @override
  void initState() {
    _id = widget.id;
    getSanzijingDetail(_id).then((res) {
      setState(() {
        _data = res;
      });
    });
    super.initState();
  }

  List<Widget> renderContents(contents) {
    List<Widget> list = [];
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      list.add(
        Container(
          padding: EdgeInsets.fromLTRB(7, 15, 0, 15),
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    width: 12,
                    height: 12,
                    decoration: BoxDecoration(color: Global.primaryColor),
                  ),
                  SizedBox(width: 10),
                  Text(
                    content['title'],
                    style: TextStyle(
                      fontFamily: 'fangzhengkai',
                      fontSize: 15,
                      fontWeight: FontWeight.bold,
                      color: Global.fontColor,
                    ),
                  )
                ],
              ),
              Text(
                content['content'],
                style: TextStyle(
                  fontFamily: 'fangzhengkai',
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                  color: Global.fontSecondColor,
                  height: 1.8,
                ),
              )
            ],
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    MainManager _mainManager = Provider.of<MainManager>(context);
    if (_data != null && _mainManager.history['id'] != _id.toString()) {
      _mainManager.insert({
        'id': _id.toString(),
        'index': '《三字经》 第${_id.toString()}段',
        'title': _data['title'],
      });
    }
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            appBar: AppBar(
              title: Column(
                children: [
                  Text(
                    '《三字经》 第${_id.toString()}段',
                    style: TextStyle(
                      fontFamily: 'fangzhengkai',
                      fontSize: 13,
                      fontWeight: FontWeight.bold,
                      color: Global.fontSecondColor,
                    ),
                  ),
                  Text(
                    _data['title'],
                    style: TextStyle(
                      fontFamily: 'fangzhengkai',
                      fontSize: 17,
                      fontWeight: FontWeight.bold,
                      color: Global.fontColor,
                    ),
                  )
                ],
              ),
              elevation: 3,
              iconTheme: IconThemeData(color: Global.fontSecondColor),
              backgroundColor: Global.backgroundColor,
            ),
            body: FlutterEasyLoading(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                decoration: BoxDecoration(
                  color: Global.backgroundColor.withOpacity(0.85),
                ),
                child: Stack(
                  children: [
                    Positioned(
                      top: 0,
                      right: 0,
                      child: Container(
                        width: MediaQuery.of(context).size.width - 100,
                        child: Image.asset('assets/images/1.png'),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      child: Container(
                        width: MediaQuery.of(context).size.width - 100,
                        child: Image.asset('assets/images/2.png'),
                      ),
                    ),
                    Positioned(
                      top: 10,
                      left: 10,
                      right: 10,
                      bottom: 70,
                      child: SingleChildScrollView(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              width: MediaQuery.of(context).size.width,
                              padding: EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  color: Global.cardColor,
                                ),
                                borderRadius: BorderRadius.circular(5),
                                color: Global.cardColor.withOpacity(0.3),
                              ),
                              child: Column(
                                children: [
                                  Container(
                                    padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
                                    width: MediaQuery.of(context).size.width,
                                    decoration: BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(
                                          color: Global.cardColor,
                                          width: 0.5,
                                        ),
                                      ),
                                    ),
                                    child: Text(
                                      ' 注音：${_data['title']}',
                                      style: TextStyle(
                                        fontFamily: 'fangzhengkai',
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                        color: Global.fontColor,
                                      ),
                                    ),
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        child: Container(
                                          padding: EdgeInsets.all(5),
                                          decoration: BoxDecoration(
                                            border: Border(
                                              right: BorderSide(
                                                color: Global.cardColor
                                                    .withOpacity(0.2),
                                              ),
                                              bottom: BorderSide(
                                                color: Global.cardColor
                                                    .withOpacity(0.2),
                                              ),
                                            ),
                                          ),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceAround,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            children: [
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][0][0]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][0][0]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][0][1]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][0][1]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][0][2]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][0][2]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: Container(
                                          padding: EdgeInsets.all(5),
                                          decoration: BoxDecoration(
                                            border: Border(
                                              bottom: BorderSide(
                                                color: Global.cardColor
                                                    .withOpacity(0.2),
                                              ),
                                            ),
                                          ),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceAround,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            children: [
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][1][0]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][1][0]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][1][1]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][1][1]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][1][2]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][1][2]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        child: Container(
                                          padding: EdgeInsets.all(5),
                                          decoration: BoxDecoration(
                                            border: Border(
                                              right: BorderSide(
                                                color: Global.cardColor
                                                    .withOpacity(0.2),
                                              ),
                                            ),
                                          ),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceAround,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            children: [
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][2][0]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][2][0]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][2][1]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][2][1]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][2][2]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][2][2]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: Container(
                                          padding: EdgeInsets.all(5),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceAround,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            children: [
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][3][0]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][3][0]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][3][1]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][3][1]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Text(
                                                    _data['pinyin'][3][2]
                                                        ['pinyin'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 18,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color:
                                                          Global.primaryColor,
                                                    ),
                                                  ),
                                                  Text(
                                                    _data['pinyin'][3][2]
                                                        ['value'],
                                                    style: TextStyle(
                                                      fontFamily:
                                                          'fangzhengkai',
                                                      fontSize: 29,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Global.fontColor,
                                                    ),
                                                  ),
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),
                            Column(
                              children: renderContents(_data['contents']),
                            ),
                            SizedBox(height: 35),
                          ],
                        ),
                      ),
                    ),
                    Positioned(
                      left: 0,
                      right: 0,
                      bottom: 0,
                      child: Container(
                        height: 70,
                        padding: EdgeInsets.only(bottom: 20),
                        decoration: BoxDecoration(
                          color: Global.backgroundColor.withOpacity(0.9),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.15),
                              offset: Offset(0, -1),
                              blurRadius: 3,
                              spreadRadius: 1,
                            )
                          ],
                        ),
                        child: Row(
                          children: [
                            _id != '1'
                                ? Expanded(
                                    child: InkWell(
                                      onTap: () {
                                        EasyLoading.show();
                                        getSanzijingDetail(
                                                (int.parse(_id) - 1).toString())
                                            .then((res) {
                                          EasyLoading.dismiss();
                                          setState(() {
                                            _id =
                                                (int.parse(_id) - 1).toString();
                                            _data = res;
                                          });
                                        });
                                      },
                                      child: Container(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Icon(
                                              Icons.arrow_back_ios,
                                              color: Global.fontSecondColor,
                                              size: 17,
                                            ),
                                            SizedBox(width: 5),
                                            Text(
                                              '上一段',
                                              style: TextStyle(
                                                fontFamily: 'fangzhengkai',
                                                fontSize: 20,
                                                fontWeight: FontWeight.bold,
                                                color: Global.fontSecondColor,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  )
                                : Container(),
                            _id != '123'
                                ? Expanded(
                                    child: InkWell(
                                      onTap: () {
                                        EasyLoading.show();
                                        getSanzijingDetail(
                                                (int.parse(_id) + 1).toString())
                                            .then((res) {
                                          EasyLoading.dismiss();
                                          setState(() {
                                            _id =
                                                (int.parse(_id) + 1).toString();
                                            _data = res;
                                          });
                                        });
                                      },
                                      child: Container(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Text(
                                              '下一段',
                                              style: TextStyle(
                                                fontFamily: 'fangzhengkai',
                                                fontSize: 20,
                                                fontWeight: FontWeight.bold,
                                                color: Global.fontSecondColor,
                                              ),
                                            ),
                                            SizedBox(width: 5),
                                            Icon(
                                              Icons.arrow_forward_ios,
                                              color: Global.fontSecondColor,
                                              size: 17,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  )
                                : Container(),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
  }
}
